সিএসএস লজিক্যাল প্রপার্টিজ লেভেল ২: উন্নত রাইটিং মোড সাপোর্টের মাধ্যমে একটি সত্যিকারের গ্লোবাল ওয়েব তৈরি

দশকের পর দশক ধরে, ওয়েব ডেভেলপাররা বাস্তব জগতের উপর ভিত্তি করে একটি শব্দভাণ্ডার ব্যবহার করে লেআউট তৈরি করেছেন: top, bottom, left, এবং right। আমরা margin-left, padding-top, এবং border-right সেট করেছি। এই মানসিক মডেলটি আমাদের জন্য বেশ কার্যকরী ছিল যখন ওয়েব মূলত বাম-থেকে-ডান, উপর-থেকে-নিচ এই মাধ্যমে সীমাবদ্ধ ছিল। কিন্তু, ওয়েব এখন বিশ্বব্যাপী। এটি সমস্ত ভাষা এবং সংস্কৃতির জন্য একটি প্ল্যাটফর্ম, যার মধ্যে অনেকগুলিই এই সাধারণ দিকনির্দেশক প্রবাহ অনুসরণ করে না।

আরবি এবং হিব্রু-র মতো ভাষা ডান-থেকে-বামে লেখা হয়। প্রথাগত জাপানি এবং চীনা ভাষা উল্লম্বভাবে, উপর-থেকে-নিচে এবং ডান-থেকে-বামে লেখা যেতে পারে। এই লিখন পদ্ধতিগুলির উপর একটি বাস্তব, বাম-থেকে-ডান সিএসএস মডেল জোর করে চাপিয়ে দিলে লেআউট ভেঙে যায়, ব্যবহারকারীর অভিজ্ঞতা হতাশাজনক হয় এবং কোড ওভাররাইডের পাহাড় তৈরি হয়। এখানেই সিএসএস লজিক্যাল প্রপার্টিজ এবং ভ্যালুজের আগমন, যা বাস্তব দিকনির্দেশনা থেকে প্রবাহ-সম্পর্কিত (flow-relative), যৌক্তিক দিকনির্দেশনার দিকে একটি মৌলিক দৃষ্টান্তের পরিবর্তন ঘটায়। যদিও লেভেল ১ এর ভিত্তি স্থাপন করেছিল, সিএসএস লজিক্যাল প্রপার্টিজ লেভেল ২ সেই চিত্রটি সম্পূর্ণ করে, যা আমাদের সত্যিকারের সার্বজনীন, রাইটিং-মোড-সচেতন ইউজার ইন্টারফেস তৈরির জন্য প্রয়োজনীয় টুলস সরবরাহ করে।

এই বিশদ গাইডটি আপনাকে লেভেল ২ দ্বারা আনা উন্নত বৈশিষ্ট্যগুলির গভীরে নিয়ে যাবে। আমরা মূল ধারণাগুলির একটি পুনরালোচনা দিয়ে শুরু করব, তারপর নতুন প্রপার্টি এবং ভ্যালুগুলি অন্বেষণ করব যা শূন্যস্থান পূরণ করে, এবং সবশেষে, এমন একটি কম্পোনেন্ট তৈরি করে সবকিছুকে বাস্তবে প্রয়োগ করব যা যেকোনো রাইটিং মোডের সাথে নিখুঁতভাবে খাপ খাইয়ে নিতে পারে। সিএসএস লেআউট সম্পর্কে আপনার চিন্তাভাবনা চিরতরে পরিবর্তন করার জন্য প্রস্তুত হন।

একটি দ্রুত পুনরালোচনা: লজিক্যাল প্রপার্টিজের মূল ধারণা (লেভেল ১)

লেভেল ২-এর সংযোজনগুলি বোঝার আগে, লেভেল ১ দ্বারা স্থাপিত ভিত্তি সম্পর্কে আমাদের একটি শক্ত ধারণা থাকতে হবে। পুরো সিস্টেমটি দুটি মূল ধারণার উপর নির্মিত: writing mode এবং এর ফলস্বরূপ block and inline axes।

চারটি রাইটিং মোড

writing-mode সিএসএস প্রপার্টি নির্ধারণ করে যে টেক্সট কোন দিকে বিন্যস্ত হবে। যদিও আমরা প্রায়শই ডিফল্ট মানটিকে স্বাভাবিক বলে ধরে নিই, এমন কয়েকটি ভ্যালু রয়েছে যা পৃষ্ঠায় বিষয়বস্তুর প্রবাহকে মৌলিকভাবে পরিবর্তন করে দেয়:

• horizontal-tb: এটি বেশিরভাগ পশ্চিমা ভাষার জন্য ডিফল্ট। টেক্সট অনুভূমিকভাবে (ইনলাইন অক্ষ) বাম-থেকে-ডানে (অথবা ডিরেকশনের উপর ভিত্তি করে ডান-থেকে-বামে) প্রবাহিত হয় এবং লাইনগুলি উপর-থেকে-নিচে (ব্লক অক্ষ) সজ্জিত হয়।
• vertical-rl: প্রথাগত পূর্ব এশীয় টাইপোগ্রাফির জন্য ব্যবহৃত হয় (যেমন, জাপানি, চীনা)। টেক্সট উল্লম্বভাবে উপর-থেকে-নিচে (ইনলাইন অক্ষ) প্রবাহিত হয় এবং লাইনগুলি ডান-থেকে-বামে (ব্লক অক্ষ) সজ্জিত হয়।
• vertical-lr: উপরেরটির মতোই, কিন্তু লাইনগুলি বাম-থেকে-ডানে (ব্লক অক্ষ) সজ্জিত হয়। এটি কম প্রচলিত, তবে মঙ্গোলীয় লিপির মতো কিছু ক্ষেত্রে ব্যবহৃত হয়।
• sidelong-rl / sidelong-lr: এগুলি নির্দিষ্ট ব্যবহারের ক্ষেত্রে প্রযোজ্য যেখানে আপনি গ্লিফগুলিকে তাদের পাশে স্থাপন করতে চান। সাধারণ ওয়েব সামগ্রীতে এগুলি কম ব্যবহৃত হয়।

গুরুত্বপূর্ণ ধারণা: ব্লক বনাম ইনলাইন অক্ষ

এটি বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ ধারণা। একটি যৌক্তিক জগতে, আমরা "উল্লম্ব" এবং "অনুভূমিক" নিয়ে চিন্তা করা বন্ধ করে ব্লক এবং ইনলাইন অক্ষের পরিপ্রেক্ষিতে চিন্তা শুরু করি। এদের অভিমুখ সম্পূর্ণরূপে writing-mode-এর উপর নির্ভর করে।

• ইনলাইন অক্ষ (Inline Axis) হলো সেই দিক যেদিকে একটি লাইনের মধ্যে টেক্সট প্রবাহিত হয়।
• ব্লক অক্ষ (Block Axis) হলো সেই দিক যেদিকে নতুন লাইনগুলি সজ্জিত হয়।

আসুন দেখি এটি কীভাবে কাজ করে:

• সাধারণ ইংরেজিতে (writing-mode: horizontal-tb): ইনলাইন অক্ষ অনুভূমিকভাবে চলে এবং ব্লক অক্ষ উল্লম্বভাবে চলে।
• প্রথাগত জাপানিতে (writing-mode: vertical-rl): ইনলাইন অক্ষ উল্লম্বভাবে চলে এবং ব্লক অক্ষ অনুভূমিকভাবে চলে।

যেহেতু এই অক্ষগুলি পরিবর্তিত হতে পারে, তাই width এবং height-এর মতো প্রপার্টিগুলি অস্পষ্ট হয়ে যায়। width কি অনুভূমিক অক্ষ বরাবর আকার নাকি ইনলাইন অক্ষ বরাবর? লজিক্যাল প্রপার্টিগুলি এই অস্পষ্টতা সমাধান করে। আমাদের কাছে এখন প্রতিটি অক্ষের জন্য start এবং end রয়েছে:

• block-start: ইংরেজিতে এটি "top", কিন্তু উল্লম্ব জাপানিতে এটি "right"।
• block-end: ইংরেজিতে এটি "bottom", কিন্তু উল্লম্ব জাপানিতে এটি "left"।
• inline-start: ইংরেজিতে এটি "left", কিন্তু উল্লম্ব জাপানিতে এটি "top"।
• inline-end: ইংরেজিতে এটি "right", কিন্তু উল্লম্ব জাপানিতে এটি "bottom"।

ফিজিক্যাল থেকে লজিক্যাল প্রপার্টিতে ম্যাপিং (লেভেল ১)

লেভেল ১-এ ফিজিক্যাল থেকে লজিক্যাল প্রপার্টিতে ম্যাপিংয়ের একটি বিস্তৃত সেট চালু করা হয়েছিল। এখানে কয়েকটি মূল উদাহরণ দেওয়া হলো:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (for positioning) → inset-inline-start / inset-inline-end
• top / bottom (for positioning) → inset-block-start / inset-block-end

লেভেল ১ আমাদের margin-inline (start এবং end-এর জন্য) এবং padding-block (start এবং end-এর জন্য)-এর মতো দরকারী শর্টহ্যান্ডও দিয়েছে।

লেভেল ২-এ স্বাগতম: নতুন কী আছে এবং কেন এটি গুরুত্বপূর্ণ

যদিও লেভেল ১ একটি বিশাল পদক্ষেপ ছিল, এটি কিছু লক্ষণীয় শূন্যস্থান রেখে গিয়েছিল। float, clear, এবং resize-এর মতো কিছু মৌলিক সিএসএস প্রপার্টির কোনো যৌক্তিক সমতুল্য ছিল না। উপরন্তু, border-radius-এর মতো প্রপার্টিগুলি যৌক্তিকভাবে নিয়ন্ত্রণ করা যেত না, যার ফলে ডেভেলপারদের সূক্ষ্ম স্টাইলিংয়ের জন্য ফিজিক্যাল প্রপার্টিতে ফিরে যেতে হতো। এর মানে হলো আপনি যৌক্তিক প্রপার্টি দিয়ে ৯০% লেআউট তৈরি করতে পারলেও, বিভিন্ন রাইটিং মোডের জন্য ফিজিক্যাল ওভাররাইডের প্রয়োজন হতো, যা মূল উদ্দেশ্যকে আংশিকভাবে ব্যর্থ করে দিত।

সিএসএস লজিক্যাল প্রপার্টিজ লেভেল ২ সরাসরি এই ঘাটতিগুলি পূরণ করে। এটি কোনো আমূল নতুন সিস্টেম চালু করার বিষয় নয়, বরং লেভেল ১-এ শুরু হওয়া সিস্টেমটিকে সম্পূর্ণ করার বিষয়। এটি দুটি প্রধান উপায়ে এটি অর্জন করে:

1. নতুন যৌক্তিক প্রপার্টি এবং ভ্যালু প্রবর্তন করা যা পুরোনো সিএসএস বৈশিষ্ট্যগুলির জন্য, যেগুলি সহজাতভাবে ফিজিক্যাল ছিল (যেমন float)।
2. জটিল শর্টহ্যান্ডগুলির জন্য যৌক্তিক প্রপার্টি ম্যাপিং যোগ করা যা আগে উপেক্ষা করা হয়েছিল (যেমন border-radius)।

লেভেল ২-এর মাধ্যমে, একটি সম্পূর্ণ ফ্লো-রিলেটিভ স্টাইলিং সিস্টেমের স্বপ্ন প্রায় সম্পূর্ণ, যা আমাদের হ্যাক বা ওভাররাইড ছাড়াই জটিল, সুন্দর এবং শক্তিশালী কম্পোনেন্ট তৈরি করতে দেয় যা সর্বত্র, সবার জন্য কাজ করে।

গভীর বিশ্লেষণ: লেভেল ২-এর নতুন লজিক্যাল ভ্যালু এবং প্রপার্টি

আসুন আমরা লেভেল ২ আমাদের ডেভেলপার টুলকিটে যে সবচেয়ে প্রভাবশালী সংযোজনগুলি নিয়ে এসেছে তা অন্বেষণ করি। এগুলি এমন টুল যা শূন্যস্থান পূরণ করে এবং সত্যিকারের সার্বজনীন কম্পোনেন্ট ডিজাইনকে শক্তিশালী করে।

ফ্লোট এবং ক্লিয়ার: যৌক্তিক বিপ্লব

float প্রপার্টি বছরের পর বছর ধরে সিএসএস লেআউটের একটি ভিত্তিপ্রস্তর, কিন্তু এর ভ্যালু, left এবং right, ফিজিক্যাল দিকনির্দেশনার সংজ্ঞা। আপনি যদি ইংরেজিতে একটি অনুচ্ছেদের left দিকে একটি ছবি ফ্লোট করেন, তবে তা সঠিক দেখায়। কিন্তু আরবি ভাষার জন্য ডকুমেন্টের দিক ডান-থেকে-বামে (RTL) পরিবর্তন করলে, ছবিটি এখন টেক্সট ব্লকের "ভুল" দিকে চলে যায়। এটি ডানদিকে থাকা উচিত, যা লাইনের শুরু।

লেভেল ২ float প্রপার্টির জন্য দুটি নতুন, যৌক্তিক কীওয়ার্ড প্রবর্তন করেছে:

• float: inline-start; এটি একটি এলিমেন্টকে ইনলাইন দিকের শুরুতে ফ্লোট করে। LTR ভাষায়, এটি বাম দিক। RTL ভাষায়, এটি ডান দিক। একটি vertical-rl রাইটিং মোডে, এটি উপরের দিক।
• float: inline-end; এটি একটি এলিমেন্টকে ইনলাইন দিকের শেষে ফ্লোট করে। LTR-এ এটি ডান দিক। RTL-এ এটি বাম দিক। vertical-rl-এ এটি নিচের দিক।

একইভাবে, clear প্রপার্টি, যা ফ্লোটেড এলিমেন্টের চারপাশে বিষয়বস্তুর মোড়ানো নিয়ন্ত্রণ করতে ব্যবহৃত হয়, তার যৌক্তিক প্রতিরূপ পায়:

• clear: inline-start; inline-start দিকের ফ্লোট পরিষ্কার করে।
• clear: inline-end; inline-end দিকের ফ্লোট পরিষ্কার করে।

এটি একটি গেম-চেঞ্জার। আপনি এখন ক্লাসিক ইমেজ-উইথ-টেক্সট-র‍্যাপ লেআউট তৈরি করতে পারেন যা এক লাইন অতিরিক্ত সিএসএস ছাড়াই যেকোনো ভাষার দিকনির্দেশের সাথে স্বয়ংক্রিয়ভাবে খাপ খাইয়ে নেয়।

লজিক্যাল রিসাইজের মাধ্যমে উন্নত নিয়ন্ত্রণ

resize প্রপার্টি, যা সাধারণত একটি textarea-তে ব্যবহৃত হয়, ব্যবহারকারীদের একটি এলিমেন্টের আকার পরিবর্তন করতে দেয়। এর ঐতিহ্যবাহী ভ্যালুগুলি হলো horizontal, vertical, এবং both। কিন্তু একটি উল্লম্ব রাইটিং মোডে "horizontal" মানে কী? এর মানে এখনও ফিজিক্যাল অনুভূমিক অক্ষ বরাবর আকার পরিবর্তন করা, যা ব্যবহারকারী বা ডিজাইনারের উদ্দেশ্য নাও হতে পারে। ব্যবহারকারী সম্ভবত লাইনগুলিকে দীর্ঘ বা ছোট করার জন্য তার ইনলাইন অক্ষ বরাবর এলিমেন্টের আকার পরিবর্তন করতে চায়।

লেভেল ২ resize-এর জন্য যৌক্তিক ভ্যালু প্রবর্তন করেছে:

• resize: inline; ইনলাইন অক্ষ বরাবর আকার পরিবর্তনের অনুমতি দেয়।
• resize: block; ব্লক অক্ষ বরাবর আকার পরিবর্তনের অনুমতি দেয়।

ইংরেজিতে একটি textarea-তে resize: block; ব্যবহার করলে ব্যবহারকারী সেটিকে লম্বা করতে পারে। একটি উল্লম্ব রাইটিং মোডে এটি ব্যবহার করলে ব্যবহারকারী সেটিকে চওড়া করতে পারে (যা ব্লক দিক)। এটি সহজেই কাজ করে।

`caption-side`: টেবিল ক্যাপশনের জন্য লজিক্যাল পজিশনিং

caption-side প্রপার্টি একটি টেবিলের caption-এর স্থান নির্ধারণ করে। পুরোনো ভ্যালুগুলি ছিল top এবং bottom। আবারও, এগুলি ফিজিক্যাল। যদি একজন ডিজাইনারের উদ্দেশ্য হয় টেবিলের বিষয়বস্তুর "আগে" ক্যাপশন স্থাপন করা, তবে top অনুভূমিক রাইটিং মোডের জন্য কাজ করে। কিন্তু একটি vertical-rl মোডে, ব্লক প্রবাহের "শুরু" হয় ডানদিকে, উপরে নয়।

লেভেল ২ যৌক্তিক সমাধান প্রদান করে:

• caption-side: block-start; ক্যাপশনটিকে ব্লক প্রবাহের শুরুতে স্থাপন করে।
• caption-side: block-end; ক্যাপশনটিকে ব্লক প্রবাহের শেষে স্থাপন করে।

`text-align`: একটি মৌলিক যৌক্তিক ভ্যালু

যদিও text-align-এর জন্য start এবং end ভ্যালুগুলি বেশ কিছুদিন ধরে আছে, সেগুলি যৌক্তিক প্রপার্টি দর্শনের একটি মূল অংশ এবং পুনরায় জোর দেওয়ার যোগ্য। text-align: left; ব্যবহার করা একটি সাধারণ ভুল যা RTL ভাষায় অবিলম্বে লেআউট সমস্যা সৃষ্টি করে। সঠিক, আধুনিক পদ্ধতি হলো সর্বদা ব্যবহার করা:

• text-align: start; টেক্সটকে ইনলাইন দিকের শুরুতে অ্যালাইন করে।
• text-align: end; টেক্সটকে ইনলাইন দিকের শেষে অ্যালাইন করে।

লেভেল ২-এর সেরা আকর্ষণ: লজিক্যাল `border-radius`

সম্ভবত লেভেল ২-এর সবচেয়ে তাৎপর্যপূর্ণ এবং শক্তিশালী সংযোজন হলো বর্ডার রেডিয়াসকে যৌক্তিকভাবে নিয়ন্ত্রণ করার জন্য প্রপার্টির সেট। আগে, আপনি যদি একটি কার্ডের কোণগুলি শুধুমাত্র "উপরে" গোলাকার করতে চান, তবে আপনি border-top-left-radius এবং border-top-right-radius ব্যবহার করতেন। এটি একটি উল্লম্ব রাইটিং মোডে সম্পূর্ণরূপে ভেঙে পড়ে, যেখানে "উপরের" কোণগুলি এখন start-start এবং end-start কোণ।

লেভেল ২ চারটি নতুন লংহ্যান্ড প্রপার্টি প্রবর্তন করেছে যা একটি এলিমেন্টের চারটি কোণকে একটি ফ্লো-রিলেটিভ উপায়ে ম্যাপ করে। নামকরণের নিয়মটি হলো border-[block-edge]-[inline-edge]-radius।

• border-start-start-radius: সেই কোণ যেখানে block-start এবং inline-start দিক মিলিত হয়।
• border-start-end-radius: সেই কোণ যেখানে block-start এবং inline-end দিক মিলিত হয়।
• border-end-start-radius: সেই কোণ যেখানে block-end এবং inline-start দিক মিলিত হয়।
• border-end-end-radius: সেই কোণ যেখানে block-end এবং inline-end দিক মিলিত হয়।

এটি প্রথমে কল্পনা করা কঠিন হতে পারে, তাই আসুন বিভিন্ন রাইটিং মোডের জন্য এটি ম্যাপ করি:

`writing-mode: horizontal-tb`-তে `border-radius` ম্যাপিং (যেমন, ইংরেজি)

• border-start-start-radius ম্যাপ করে top-left-radius-এর সাথে।
• border-start-end-radius ম্যাপ করে top-right-radius-এর সাথে।
• border-end-start-radius ম্যাপ করে bottom-left-radius-এর সাথে।
• border-end-end-radius ম্যাপ করে bottom-right-radius-এর সাথে।

`writing-mode: horizontal-tb` এবং `dir="rtl"`-এ `border-radius` ম্যাপিং (যেমন, আরবি)

এখানে, ইনলাইন দিকটি উল্টে যায়।

• border-start-start-radius ম্যাপ করে top-right-radius-এর সাথে। (Block-start হলো top, inline-start হলো right)।
• border-start-end-radius ম্যাপ করে top-left-radius-এর সাথে।
• border-end-start-radius ম্যাপ করে bottom-right-radius-এর সাথে।
• border-end-end-radius ম্যাপ করে bottom-left-radius-এর সাথে।

`writing-mode: vertical-rl`-এ `border-radius` ম্যাপিং (যেমন, জাপানি)

এখানে, উভয় অক্ষই ঘোরানো হয়।

• border-start-start-radius ম্যাপ করে top-right-radius-এর সাথে। (Block-start হলো right, inline-start হলো top)।
• border-start-end-radius ম্যাপ করে bottom-right-radius-এর সাথে।
• border-end-start-radius ম্যাপ করে top-left-radius-এর সাথে।
• border-end-end-radius ম্যাপ করে bottom-left-radius-এর সাথে।

এই নতুন প্রপার্টিগুলি ব্যবহার করে, আপনি এমন কর্নার রেডিয়াস নির্ধারণ করতে পারেন যা বিষয়বস্তুর প্রবাহের সাথে শব্দার্থগতভাবে আবদ্ধ, ফিজিক্যাল স্ক্রিনের সাথে নয়। একটি "start-start" কোণ সর্বদা সঠিক কোণ হবে, ভাষা বা পাঠ্যের দিক যাই হোক না কেন।

ব্যবহারিক প্রয়োগ: একটি গ্লোবাল-রেডি কম্পোনেন্ট তৈরি করা

তত্ত্ব ভালো, কিন্তু আসুন দেখি এটি বাস্তবে কীভাবে কাজ করে। আমরা একটি সাধারণ প্রোফাইল কার্ড কম্পোনেন্ট তৈরি করব, প্রথমে পুরানো ফিজিক্যাল প্রপার্টি ব্যবহার করে, এবং তারপরে এটিকে লেভেল ১ এবং লেভেল ২ উভয় থেকে আধুনিক লজিক্যাল প্রপার্টি ব্যবহার করার জন্য রিফ্যাক্টর করব।

কার্ডটিতে একপাশে একটি ছবি ফ্লোট করা থাকবে, একটি শিরোনাম, কিছু টেক্সট, এবং একটি আলংকারিক বর্ডার এবং গোলাকার কোণ থাকবে।

"পুরানো" পদ্ধতি: একটি ভঙ্গুর, ফিজিক্যাল-প্রপার্টি কার্ড

এখানে আমরা কয়েক বছর আগে কীভাবে এই কার্ডটি স্টাইল করতে পারতাম:

/* --- CSS (ফিজিক্যাল প্রপার্টিজ) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

একটি স্ট্যান্ডার্ড ইংরেজি LTR প্রেক্ষাপটে, এটি ঠিক দেখায়। কিন্তু যদি আমরা এটিকে dir="rtl" বা writing-mode: vertical-rl সহ একটি কন্টেইনারের ভিতরে রাখি, তাহলে লেআউট ভেঙে যায়। আলংকারিক বর্ডারটি ভুল দিকে, অ্যাভাটারটি ভুল দিকে, মার্জিনটি ভুল এবং গোলাকার কোণগুলি ভুল জায়গায় রয়েছে।

"নতুন" পদ্ধতি: একটি শক্তিশালী, লজিক্যাল-প্রপার্টি কার্ড

এখন, আসুন একই কম্পোনেন্টকে লজিক্যাল প্রপার্টি ব্যবহার করে রিফ্যাক্টর করি। আমরা লেভেল ১ এবং লেভেল ২ থেকে নতুন সংযোজন উভয় থেকে প্রপার্টি ব্যবহার করব।

/* --- CSS (লজিক্যাল প্রপার্টিজ) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` শর্টহ্যান্ডটি ইতিমধ্যেই যৌক্তিক! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* লেভেল ২-এর শক্তি! */

  border-end-start-radius: 8px; /* লেভেল ২-এর শক্তি! */

}

.logical-card .avatar {

  float: inline-start; /* লেভেল ২-এর শক্তি! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

পরীক্ষা এবং যাচাইকরণ

এই নতুন সিএসএস দিয়ে, আপনি কম্পোনেন্টটিকে যেকোনো কন্টেইনারে রাখতে পারেন, এবং এটি স্বয়ংক্রিয়ভাবে খাপ খাইয়ে নেবে।

• একটি LTR প্রেক্ষাপটে: এটি আসল ফিজিক্যাল সংস্করণের মতোই দেখাবে।
• একটি RTL প্রেক্ষাপটে (dir="rtl"): অ্যাভাটারটি ডানদিকে ফ্লোট করবে, এর মার্জিন বাম দিকে থাকবে, আলংকারিক বর্ডারটি ডানদিকে থাকবে এবং টেক্সটটি শুরুতে (ডানদিকে) অ্যালাইন করা হবে। গোলাকার কোণগুলি সঠিকভাবে উপরের-ডান এবং নীচের-ডান দিকে থাকবে। এটি আপনাআপনি কাজ করে।
• একটি উল্লম্ব প্রেক্ষাপটে (writing-mode: vertical-rl): কার্ডের "width" (এখন তার উল্লম্ব inline-size) 300px হবে। অ্যাভাটারটি "উপরে" (inline-start) ফ্লোট করবে এবং এর "নীচে" (inline-end) একটি মার্জিন থাকবে। আলংকারিক বর্ডারটি ডানদিকে (inline-start) থাকবে এবং গোলাকার কোণগুলি উপরের-ডান এবং উপরের-বাম দিকে থাকবে। কম্পোনেন্টটি কোনো মিডিয়া কোয়েরি বা ওভাররাইড ছাড়াই নিজেকে সম্পূর্ণভাবে সঠিকভাবে পুনর্নির্মাণ করেছে।

ব্রাউজার সাপোর্ট এবং ফলব্যাক

এই সব শুনতে চমৎকার, কিন্তু ব্রাউজার সাপোর্ট কেমন? ভালো খবর হলো, লেভেল ১ লজিক্যাল প্রপার্টিগুলির জন্য সাপোর্ট সমস্ত আধুনিক ব্রাউজারে চমৎকার। আপনি আজই margin-inline-start এবং padding-block-এর মতো প্রপার্টি ব্যবহার করতে পারেন এবং করা উচিত।

নতুন লেভেল ২ বৈশিষ্ট্যগুলির জন্য সাপোর্ট দ্রুত উন্নত হচ্ছে তবে এখনও সার্বজনীন নয়। float, clear, এবং resize-এর জন্য যৌক্তিক ভ্যালুগুলি ভালোভাবে সমর্থিত। যৌক্তিক border-radius প্রপার্টিগুলি নতুন এবং এখনও ফিচার ফ্ল্যাগের আড়ালে বা সাম্প্রতিক ব্রাউজার সংস্করণগুলিতে থাকতে পারে। সর্বদা, আপনার সবচেয়ে আপ-টু-ডেট সামঞ্জস্যতা ডেটার জন্য MDN ওয়েব ডক্স বা CanIUse.com-এর মতো সংস্থানগুলির পরামর্শ নেওয়া উচিত।

প্রগ্রেসিভ এনহ্যান্সমেন্টের জন্য কৌশল

যেহেতু সিএসএস স্থিতিস্থাপক হওয়ার জন্য ডিজাইন করা হয়েছে, আমরা সহজেই পুরানো ব্রাউজারগুলির জন্য ফলব্যাক সরবরাহ করতে পারি। ক্যাসকেড নিশ্চিত করবে যে যদি কোনো ব্রাউজার একটি যৌক্তিক প্রপার্টি না বোঝে, তবে এটি কেবল এটিকে উপেক্ষা করবে এবং এর আগে সংজ্ঞায়িত ফিজিক্যাল প্রপার্টিটি ব্যবহার করবে।

এখানে আপনি কীভাবে ফলব্যাক-প্রস্তুত সিএসএস লিখতে পারেন:

.card {

  /* পুরানো ব্রাউজারগুলির জন্য ফলব্যাক */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* আধুনিক যৌক্তিক প্রপার্টি যা ফলব্যাককে ওভাররাইড করবে */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

এই পদ্ধতিটি সবার জন্য একটি solide বেসলাইন অভিজ্ঞতা নিশ্চিত করে এবং আধুনিক ব্রাউজার ব্যবহারকারীদের জন্য উন্নত, অভিযোজিত লেআউট সরবরাহ করে। যে প্রকল্পগুলিতে একাধিক রাইটিং মোড সমর্থন করার প্রয়োজন নেই, তাদের জন্য এটি অতিরিক্ত হতে পারে। কিন্তু যেকোনো গ্লোবাল অ্যাপ্লিকেশন, ডিজাইন সিস্টেম বা থিমের জন্য, এটি একটি শক্তিশালী এবং ভবিষ্যৎ-প্রমাণ কৌশল।

ভবিষ্যৎ যৌক্তিক: লেভেল ২-এর পরেও

ফিজিক্যাল থেকে যৌক্তিক মানসিকতায় রূপান্তর আধুনিক সিএসএস-এর অন্যতম গুরুত্বপূর্ণ পরিবর্তন। এটি আমাদের স্টাইলিং ভাষাকে একটি বৈচিত্র্যময়, গ্লোবাল ওয়েবের বাস্তবতার সাথে সারিবদ্ধ করে। এটি আমাদের ভঙ্গুর, স্ক্রিন-ভিত্তিক হ্যাক থেকে স্থিতিস্থাপক, বিষয়বস্তু-ভিত্তিক ডিজাইনের দিকে নিয়ে যায়।

এখনও কি কোনো শূন্যস্থান আছে? কিছু আছে। background-position বা গ্রেডিয়েন্টের মতো প্রপার্টিগুলির জন্য যৌক্তিক ভ্যালুগুলি নিয়ে এখনও আলোচনা চলছে। কিন্তু লেভেল ২ প্রকাশের সাথে সাথে, দৈনন্দিন লেআউট এবং স্টাইলিংয়ের বেশিরভাগ কাজ এখন একটি বিশুদ্ধ যৌক্তিক পদ্ধতির মাধ্যমে সম্পন্ন করা যেতে পারে।

ডেভেলপারদের জন্য করণীয় স্পষ্ট: যৌক্তিক প্রপার্টিগুলিকে ডিফল্ট হিসেবে ব্যবহার শুরু করুন। width-এর পরিবর্তে inline-size-কে আপনার পছন্দের বানান। বাম এবং ডান মার্জিন আলাদাভাবে সেট করার পরিবর্তে margin-inline ব্যবহার করুন। এটি কেবল বিভিন্ন ভাষা সমর্থন করার বিষয় নয়; এটি আরও ভালো, আরও স্থিতিস্থাপক সিএসএস লেখার বিষয়। যৌক্তিক প্রপার্টি দিয়ে তৈরি একটি কম্পোনেন্ট সহজাতভাবে আরও পুনঃব্যবহারযোগ্য এবং অভিযোজনযোগ্য, তা LTR, RTL, বা উল্লম্ব লেআউটে ব্যবহৃত হোক না কেন। এটি সহজভাবে উন্নত ইঞ্জিনিয়ারিং।

উপসংহার: প্রবাহকে আলিঙ্গন করুন

সিএসএস লজিক্যাল প্রপার্টিজ লেভেল ২ কেবল নতুন বৈশিষ্ট্যগুলির একটি সংগ্রহ নয়; এটি একটি স্বপ্নের পরিপূর্ণতা। এটি সেই চূড়ান্ত, গুরুত্বপূর্ণ অংশগুলি সরবরাহ করে যা তাদের বিষয়বস্তুর প্রাকৃতিক প্রবাহকে সম্মান করে এমন লেআউট তৈরি করার জন্য প্রয়োজন, সেই প্রবাহ যাই হোক না কেন। float: inline-start এবং border-start-start-radius-এর মতো প্রপার্টিগুলিকে আলিঙ্গন করে, আমরা আমাদের দক্ষতাকে কেবল স্ক্রিনে বাক্স স্থাপন করা থেকে সত্যিকারের গ্লোবাল, অন্তর্ভুক্তিমূলক এবং ভবিষ্যৎ-প্রমাণ ওয়েব অভিজ্ঞতা ডিজাইনে উন্নীত করি।

পরের বার যখন আপনি একটি নতুন প্রকল্প শুরু করবেন বা একটি নতুন কম্পোনেন্ট তৈরি করবেন, margin-left টাইপ করার আগে একটু থামুন। নিজেকে জিজ্ঞাসা করুন, "আমি কি বাম দিক বোঝাতে চাইছি, নাকি শুরুটা বোঝাতে চাইছি?" এই ছোট মানসিক পরিবর্তন করে, আপনি সর্বত্র, সবার জন্য একটি আরও অভিযোজনযোগ্য এবং অ্যাক্সেসযোগ্য ওয়েবে অবদান রাখবেন।